//文档加载事件
document.ready(function () {
    //获取元素
    let apiToptext = document.querySelector('.api-toptext')
    let shuJu = document.querySelector('#shuju')
    let SearchKuang = document.querySelector('.Search-kuang')

    let listBox = document.querySelector('.list-box')

    let mantel=document.querySelector('.mantle')
    let modal=document.querySelector('.modal')

    let toggleLoginA=document.querySelectorAll('.modal .toggle-login a')
    let loginList=document.querySelectorAll('.login-box .loginlist')

    let name=document.querySelector('#name')
    let pwd=document.querySelector('#pwd')
    let delName=document.querySelector('#del-name')
    let delPwd=document.querySelector('#del-pwd')
    let loginBtn=document.querySelector('#login-btn')//登录按钮
    let field=document.querySelectorAll('.field')//两个输入框
    let error=document.querySelectorAll('.error')//错误提示
    let errorName=document.querySelector('#error-name')//账号错误提示
    let errorPwd=document.querySelector('#error-pwd')//密码错误提示


    /*1， 模拟api分类数据 */
    let apiData = [
        { name: '全部', keyword: '身份证实名', isBold: false },
        { name: '生活服务', keyword: '银行卡', isBold: false },
        { name: '金融科技', keyword: '短信', isBold: false },
        { name: '交通地理', keyword: '天气', isBold: false },
        { name: '充值缴费', keyword: '短信', isBold: false },
        { name: '数据智能', keyword: '手机归属地', isBold: false },
        { name: '企业工商', keyword: 'IP', isBold: false },
        { name: '应用开发', keyword: '手机归属地', isBold: false },
        { name: '电子商务', keyword: 'IP', isBold: false },
        { name: '吃喝玩乐', keyword: '畅销', isBold: false },
        { name: '文娱视频', keyword: '小建议', isBold: false },
        { name: '免费接口大全', keyword: '免费接口', isBold: true },
        { name: '短信', keyword: '短信', isBold: false },
        { name: '汽车', keyword: '车辆信息', isBold: false },
        { name: '核验', keyword: '验证', isBold: false },
        { name: '最新发布', keyword: '新闻动态', isBold: true },
        { name: 'API私有化部署', keyword: '私有化API', isBold: true }
    ]

    /* 2.需求:将拼接好的apiData数据渲染到页面api-toptext中*/
    function renderData() {
        let apiHtml = '';//定义html字符串保存拼装好的数据
        apiData.forEach(function (v) {
            apiHtml += `
        <a data-keyword="${v.keyword}"class="${v.isBold ? 'strong' : ''}">${v.name}</a>
    `
        })
        apiToptext.innerHTML = apiHtml;//渲染到页面中
        apiToptext.firstElementChild.classList.add('active')
    }
    //封装函数调用
    renderData();

    /* 3.点击 api-toptext下a标签，实现搜索联动效果*/
    apiToptext.addEventListener('click', function (e) {
        if (e.target.nodeName === 'A') {  //事件源
            //获取当前事件源的文本内容,并渲染到SearchKuang
            shuJu.textContent = e.target.textContent
            //获取当前事件源的自定义属性data-keyword,并渲染到search-text中placeholder属性值
            SearchKuang.placeholder = e.target.dataset.keyword
            //先清除所有a标签的类名active
            for (let i = 0; i < apiToptext.children.length; i++) {
                apiToptext.children[i].classList.remove('active')
            };
            //给当前事件源(e.target)添加激活样式
            e.target.classList.add('active')
        }
    })

    /**
     * 4.需求: API列表区域 模拟服务器返回的数据
     */

    let listDataArr = [
        //第一行
        { img: "API_01.jpg", name: "2021出行防疫政策指南", price: "免费", isSpecial: false },
        { img: "API_02.jpg", name: "身份证实名认证", price: "￥0.2000/次", isSpecial: true },
        { img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
        { img: "API_04.jpg", name: "银行卡四元素校验", price: "￥0.3360/次", isSpecial: true },
        { img: "API_05.jpg", name: "短信API服务", price: "￥0.0400/次", isSpecial: true },

        //第二行
        { img: "API_01.jpg", name: "2021出行防疫政策指南", price: "免费", isSpecial: false },
        { img: "API_02.jpg", name: "身份证实名认证", price: "￥0.2000/次", isSpecial: true },
        { img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
        { img: "API_04.jpg", name: "银行卡四元素校验", price: "￥0.3360/次", isSpecial: true },
        { img: "API_05.jpg", name: "短信API服务", price: "￥0.0400/次", isSpecial: true },
        //第三行
        { img: "API_01.jpg", name: "2021出行防疫政策指南", price: "免费", isSpecial: false },
        { img: "API_02.jpg", name: "身份证实名认证", price: "￥0.2000/次", isSpecial: true },
        { img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
        { img: "API_04.jpg", name: "银行卡四元素校验", price: "￥0.3360/次", isSpecial: true },
        { img: "API_05.jpg", name: "短信API服务", price: "￥0.0400/次", isSpecial: true },
        //第四行
        { img: "API_01.jpg", name: "2021出行防疫政策指南", price: "免费", isSpecial: false },
        { img: "API_02.jpg", name: "身份证实名认证", price: "￥0.2000/次", isSpecial: true },
        { img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
        { img: "API_04.jpg", name: "银行卡四元素校验", price: "￥0.3360/次", isSpecial: true },
        { img: "API_05.jpg", name: "短信API服务", price: "￥0.0400/次", isSpecial: true },

    ]

    /* 5.动态渲染api列表数据 */
    function renderApiList() {
        let apiListHtml = '';
        listDataArr.forEach(function (v) {
            //html字符串保存拼装好的数据
            apiListHtml += `
      <li class="list-item fl">
          <span class="${v.isSpecial ? 'on' : 'off'}">企业专用</span>
          <div class="content">
              <a href="./APIDetails.html">
                  <img src="../imags/${v.img}" alt="">
                  <p class="api-name">${v.name}</p>
                  <p class="${v.price === '免费' ? 'green' : 'red'}">${v.price}</p>
              </a>
          </div>
          <a class="list-btn" href="#">申请数据</a>
      </li>
      `
        })
        //动态渲染
        listBox.innerHTML = apiListHtml
    }
    //封装函数调用
    renderApiList();

    /* 6.点击申请数据按钮(list-btn) 显示蒙层(mantle) */
    listBox.addEventListener('click',function(e){
        //判断事件源中是否含有(list-btn)
        let bool=e.target.classList.contains('list-btn')
        if(bool){
            mantel.style.display='block'//显示蒙层
        }
    })

    /* 7.点击蒙层(mantel)，隐藏自己 */
    mantel.addEventListener('click',function(){
        this.style.display='none'
    })

    /* 8.点击模态框(modal)阻止事件冒泡 */
    modal.addEventListener('click',function(e){
        e.stopPropagation()//阻止事件冒泡
        // e.preventDefault()//阻止浏览器默认行为
    })


    /*9.(选项卡) 点击登录切换按钮(toggle-login a)显示对应内容(loginlist) */
    tabCard(toggleLoginA,'active',loginList,'show')


    /* 10.登录验证 */

    /*账号输入框输入(input)时显示图标(delName) */
    name.addEventListener('input',function(){
        if(name.value.length>0){
            delName.style.display="block"
        }else{
            delName.style.display="none"
        }
    })

    /* 点击账号删除按钮(delName)删除账号的内容并且隐藏自己 */
    delName.addEventListener('click',function(){
        name.value=''
        this.style.display="none"
        errorName.style.display="none"
    })

    /* 密码输入框输入(input)时显示图标(delPwd) */
    pwd.addEventListener('input',function(){
        if(pwd.value.length>0){
            delPwd.style.display="block"
        }else{
            delPwd.style.display="none"
        }
    })
    /* 点击密码删除按钮(delPwd)删除密码的内容并且隐藏自己 */
    delPwd.addEventListener('click',function(){
        pwd.value=''
        this.style.display="none"
        errorPwd.style.display="none"
    })

    /* 定义正则表达式 */
    let reg = [
        /^[a-zA-Z][a-zA-Z0-9_]{5,11}$/,//账号 6-12位字母开头,后面跟数字字母
        /^[a-zA-Z][a-zA-Z0-9_]{5,11}$/ //密码
      ]


    /* 需求: 失去焦点, 验证输入信息的合法性, 如果不合法: 显示错误提示信息, 否则:就隐藏*/
    field.forEach(function (dom, i) {
    dom.addEventListener('blur', function () {
      let bool = reg[i].test(this.value);
      if (bool) {
        //真:隐藏
        error[i].style.display = 'none'
      } else {
        //假: 显示
        error[i].style.display = 'block'
      }
    })
  })

    /*  */
    loginBtn.addEventListener('click', function () {
        for(let i=0; i<field.length; i++){
          let bool = reg[i].test(field[i].value);
          //判断
          if (bool) {
            error[i].style.display = 'none'
          } else {
            error[i].style.display = 'block'
            return //结束函数
          }
        }
        //完成并跳转
        location.href = './APIDetails.html'
    })



















})